<template>
  <div class="message-custom-tip-card">
    <div class="title">
      <image class="icon" mode="aspectFill" src="@/TUIWidget/static/message-custom/video.png" />
      {{ props.content.title }}
    </div>
    <div class="text">{{ props.content.text }}</div>
    <div class="btn" @click="handleClick(props.content.buttonText)">
      {{ props.content.buttonText }}
    </div>

    <!-- 输入框示例 -->
    <uni-popup ref="inputDialog" type="dialog">
      <uni-popup-dialog
        ref="inputClose"
        mode="input"
        title="设置视频时间"
        value=""
        placeholder="请选择视频时间"
        @confirm="dialogInputConfirm"
      ></uni-popup-dialog>
    </uni-popup>
  </div>
</template>

<script lang="ts" setup>
import { ref } from '@/TUIKit/adapter-vue'

interface Props {
  content: any
}

const props = withDefaults(defineProps<Props>(), {
  content: undefined,
})

const handleClick = e => {
  console.log('点击了:', e)
  inputDialogToggle()
}

const inputDialog = ref()
const inputDialogToggle = () => {
  inputDialog.value.open()
}

const dialogInputConfirm = val => {
  uni.showLoading({
    title: '3秒后会关闭',
  })

  setTimeout(() => {
    uni.hideLoading()
    console.log(val)
    // 关闭窗口后，恢复默认内容
    inputDialog.value.close()
  }, 3000)
}
</script>

<style lang="scss" scoped>
.message-custom-tip-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box;
  margin: 0 30px 30px;
  padding: 12px;
  font-size: 14px;
  color: #000;
  letter-spacing: 0;
  word-wrap: break-word;
  word-break: break-all;
  position: relative;
  padding: 12px;
  background: #fff;
  border-radius: 20px;

  .title {
    font-size: 32rpx;
    font-weight: bold;

    .icon {
      width: 50rpx;
      height: 50rpx;
      margin-top: -2px;
      margin-right: 10rpx;
      vertical-align: middle;
    }
  }
  .text {
    margin: 10rpx 0;
  }
  .btn {
    margin-top: 30rpx;
    line-height: 2em;
    color: #3e6efe;
    text-align: center;
  }
}
</style>
